<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品列表</title>
		<link rel="icon" href="img2/favicon.ico" />
		<style>
			*{margin: 0px;padding: 0px;}
			.box{width: 900px;margin: 0 auto;margin-top: 40px;color: #666;}
			.yiji{/*background-color: red;*/height: 300px;width:260px ;}
			.yiji1{/*background-color: yellowgreen;*/height: 300px;width:260px ;}
			.yiji2{/*background-color: cyan;*/height: 300px;width:260px ;}
			h5{font-size: 16px;}
			li{list-style: none;}
			p{font-size: 14px;}
			.clearfix:after{
				display: table;
				content: "";
				clear: both;				
			}
			.fl{float: left;}
			h5 a{text-decoration: none;color:#666 ;}
			.yiji h5{margin-top: 50px;margin-left: 25px;}
			.yiji p{margin-top: 20px;margin-left: 25px;}
			.yiji img{margin-top: 50px;margin-left: 56px;}
			.erji{height: 150px;border: 1px solid #ccc;box-sizing: border-box;}
			.erji h5{margin-top: 25px;margin-left: 20px;}
			.erji p{margin-top: 15px;margin-left: 20px;}
			.erji img{margin-top:-55px;margin-left:142px;}
			.yiji{border: 1px solid #ccc;box-sizing: border-box;border-right: none;}
			.xi{border-bottom: none;border-right: none;/*background-color: #1EC0FF;*/}
			.xi1{border-right: none;}
			.xi2{border-bottom: none;}
			h5 a:hover{color: darkred;}
			img{transition:  all 1s;
			transition-timing-function: ease-out;}
			img:hover{transform: translateX(-12px);}
		</style>
	</head>
	<body>
		<div class="box">
			<ul class="clearfix">
				<li class="yiji fl">
					<h5><a href="homework13-4.html">超级信用卡</a></h5>
					<p>线上线下课累计彩贝积分</p>
					<img src="img2/1.bmp" />
				</li>
				<li class="yiji1 fl">
					<ul>
						<li class="erji xi">
					        <h5><a href="#">彩贝抢霸</a></h5>
					        <p>每天10点更新</p>
					        <img src="img2/2.bmp" />
				       </li>
				       <li class="erji xi1">
					        <h5><a href="#">热门优惠劵</a></h5>
					        <p>全场免费领取</p>
					        <img src="img2/4.bmp" />
				       </li>
					</ul>
					
				</li>
				<li class="yiji2 fl">
					<ul>
						<li class="erji xi2">
					        <h5><a href="#">促销活动</a></h5>
					        <p>汇集全网优惠</p>
					        <img src="img2/3.bmp" />
				       </li>
				       <li class="erji ">
					        <h5><a href="#">精挑细选</a></h5>
					        <p>给你最好的选择</p>
					        <img src="img2/5.bmp" />
				       </li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>
